<template>
  <div class="conversation-list">
    <div class="page-header">
      <h2>对话历史</h2>
      <el-button type="primary" @click="$router.push('/chat')">
        <el-icon><Plus /></el-icon>
        新建对话
      </el-button>
    </div>
    
    <el-card>
      <div class="conversation-grid">
        <div v-if="conversations.length === 0" class="empty-state">
          <el-icon class="empty-icon"><ChatRound /></el-icon>
          <p>暂无对话记录</p>
          <el-button type="primary" @click="$router.push('/chat')">
            开始对话
          </el-button>
        </div>
        
        <div v-else>
          <div
            v-for="conversation in conversations"
            :key="conversation.id"
            class="conversation-item"
            @click="$router.push(`/chat/${conversation.id}`)"
          >
            <h4>{{ conversation.title }}</h4>
            <p>{{ conversation.preview }}</p>
            <span class="time">{{ formatTime(conversation.updated_at) }}</span>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Plus, ChatRound } from '@element-plus/icons-vue'

const conversations = ref([])

const formatTime = (timeString) => {
  return new Date(timeString).toLocaleDateString()
}

onMounted(() => {
  // 加载对话列表
})
</script>

<style scoped lang="scss">
.conversation-list {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  
  .empty-icon {
    font-size: 64px;
    color: var(--el-text-color-placeholder);
    margin-bottom: 20px;
  }
  
  p {
    margin-bottom: 20px;
    color: var(--el-text-color-regular);
  }
}

.conversation-item {
  padding: 16px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  cursor: pointer;
  
  &:hover {
    background: var(--el-fill-color-light);
  }
  
  h4 {
    margin: 0 0 8px 0;
    color: var(--el-text-color-primary);
  }
  
  p {
    margin: 0 0 8px 0;
    color: var(--el-text-color-regular);
    font-size: 14px;
  }
  
  .time {
    font-size: 12px;
    color: var(--el-text-color-placeholder);
  }
}
</style>